// 设备管理页面-设备配置
import { useQuery } from '@tanstack/react-query';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react';
import { useEffect, useState } from 'react';

import api from '@/apis/api';

import Buttons from '../components/buttons';

interface DataType {
  id: number;
  maxAdminCount: string;
  maxOperatorCount: string;
  maxRsaKeyCount: string;
  maxSm2KeyCount: string;
  maxSymmetricKeyCount: string;
  maxSessionKeyCount: string;
  maxFileSystemCapacity: string;
  logLevel: string;
}

const DevicesConfig: React.FC = () => {
  const [deviceConfigTable, setDeviceConfigTable] = useState<DataType[]>([
    // {
    //   id: 1,
    //   maxAdminCount: '1个',
    //   maxOperatorCount: '1个',
    //   maxRsaKeyCount: '1对',
    //   maxSm2KeyCount: '1对',
    //   maxSymmetricKeyCount: '1对',
    //   maxSessionKeyCount: '1对',
    //   maxFileSystemCapacity: '64KB',
    //   logLevel: '1',
    // },
  ]);

  // 表格属性
  const columns: ColumnsType<DataType> = [
    {
      title: '最大管理员数量',
      dataIndex: 'maxAdminCount',
      key: 'maxAdminCount',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '最大操作员数量',
      dataIndex: 'maxOperatorCount',
      key: 'maxOperatorCount',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '最大RSA密钥数',
      dataIndex: 'maxRsaKeyCount',
      key: 'maxRsaKeyCount',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '最大SM2密钥数',
      dataIndex: 'maxSm2KeyCount',
      key: 'maxSm2KeyCount',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '最大对称密钥数',
      dataIndex: 'maxSymmetricKeyCount',
      key: 'maxSymmetricKeyCount',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '最大会话密钥数',
      dataIndex: 'maxSessionKeyCount',
      key: 'maxSessionKeyCount',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '最大文件系统容量',
      dataIndex: 'maxFileSystemCapacity',
      key: 'maxFileSystemCapacity',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '日志等级',
      dataIndex: 'logLevel',
      key: 'logLevel',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
  ];

  const { data: deviceConfig } = useQuery({
    queryKey: ['getDeviceConfig'],
    queryFn: async (params) => {
      const res: any = await api.GetDeviceConfig(params);
      return res.data;
    },
  });

  useEffect(() => {
    if (deviceConfig) {
      const { items } = deviceConfig;
      if (items.length > 0) {
        setDeviceConfigTable(items);
      } else {
        setDeviceConfigTable([items]);
      }
    }
  }, [deviceConfig]);

  return (
    <>
      {/* 按钮组件 */}
      <div
        style={{
          background: '#fff',
          marginTop: '-24px',
          padding: '24px',
        }}
      >
        <Buttons />
      </div>

      <div
        style={{
          background: '#fff',
          padding: '24px',
          marginBottom: '24px',
          marginTop: '24px',
        }}
      >
        <div>
          <div>
            <Table
              dataSource={deviceConfigTable}
              columns={columns}
              rowKey={(record) => record.id.toString()}
              pagination={false}
            />
          </div>
        </div>
      </div>
    </>
  );
};
export default DevicesConfig;
